<template>
  <div class="tab-item">
      <el-avatar size="medium" :src="url"></el-avatar>
      <div class="tab-content">
          <div class="tab-text">{{title}}</div>
          <div class="tab-data">{{content}}</div>
      </div>
  </div>
</template>

<script>
export default {
    name: 'TabItem',
    props:{
        title: String,
        content: String,
        url: String
    },
    setup(proprs){
        
    }
}
</script>

<style lang="scss">
    .tab-item{
        display: flex;
        padding: 10px 10px;
        border-bottom: 1px solid #f0f0f0;
        .tab-content{
            margin-left: 20px;
        }
        .tab-text{
            font-size: 14px;
            color: #000;
        }
        .tab-data{
            margin-top: 10px;
            font-size: 12px;
        }

        &:hover{
            cursor: pointer;
            background-color: #e6f7ff;
        }
    }
</style>
